/* themes */
/* @import '../../packages/client/assets/style/themes/webpack.css'; */
/* @import '../../packages/client/assets/style/themes/babel.css'; */
/* @import '../../packages/client/assets/style/themes/node.css'; */

/* --------- */
.pop {
  --color-title: #e53498;
  --color-base: #1c1235;
  --color-background: #e5e5e5;
  --color-link: #6f4dca;

  & h1 {
    color: var(--color-title);
  }
  & h2 {
    color: var(--color-title);
  }

  & a {
    color: var(--color-link);
  }
}

.webpack {
  --color-title: #8dd6f9;
  --color-base: #fff;
  --color-background: #2b3a42;
  --color-link: #86a5ba;

  & h1 {
    color: var(--color-title);
  }
  & h2 {
    color: var(--color-title);
  }

  & a {
    color: var(--color-link);
  }
}

.babel {
  --color-title: #f5da55;
  --color-base: #f1f1f1;
  --color-background: #3b3c38;
  --color-link: hsla(0, 0%, 100%, 0.8);

  & h1 {
    color: var(--color-title);
  }
  & h2 {
    color: var(--color-title);
  }

  & a {
    color: var(--color-link);
  }
}

.node {
  --color-title: #99cc7d;
  --color-base: #f2f2f2;
  --color-background: #2c3437;
  --color-link: #84ba64;

  & h1 {
    color: var(--color-title);
  }
  & h2 {
    color: var(--color-title);
  }

  & a {
    color: var(--color-link);
  }
}
